<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog :title="props.type === 'add' ? '新增数据源' : '修改数据源'" v-model="props.addVisible" @close="handleEvent">
    <el-form size="small" label-width="120px">
      <el-form-item label="数据源类型：" required>
        <el-select placeholder="请选择数据源类型" v-model="formData.dataSourceType">
          <el-option v-for="item in types" :label="item" :value="item" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据源名称：" required>
        <el-input placeholder="请输入数据源名称" v-model="formData.dataSourceName" />
      </el-form-item>
      <el-form-item label="数据源描述：">
        <el-input type="textarea" :rows="2" placeholder="请输入数据源描述" v-model="formData.dataSourceDescriptive" />
      </el-form-item>
      <el-form-item label="Protoco：" v-if="formData.dataSourceType === 'FTP'">
        <el-radio-group v-model="formData.protoco">
          <el-radio value="FTP">FTP</el-radio>
          <el-radio label="SFTP">SFTP</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="URL：" :required="['MySQL', 'Oracle', 'Doris'].includes(formData.dataSourceType)">
        <el-input type="textarea" :rows="2" placeholder="请输入URL" v-model="formData.url" />
      </el-form-item>
      <el-form-item label="用户名：" :required="['MySQL', 'Oracle', 'Doris'].includes(formData.dataSourceType)">
        <el-input placeholder="请输入用户名" v-model="formData.userName" />
      </el-form-item>
      <el-form-item label="密码：" :required="['MySQL', 'Oracle', 'Doris'].includes(formData.dataSourceType)">
        <el-input placeholder="请输入密码" v-model="formData.secretCode" />
      </el-form-item>
      <el-form-item label="请求类型：" v-if="formData.dataSourceType === 'API'" required>
        <el-radio-group v-model="formData.requestType">
          <el-radio value="post">POST</el-radio>
          <el-radio label="get">GET</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="默认请求头：" v-if="formData.dataSourceType === 'API'">
        <el-input type="textarea" :rows="2" placeholder="请输入默认请求头" v-model="formData.defaultRequestHeader" />
      </el-form-item>
      <el-form-item label="请求参数：" v-if="formData.dataSourceType === 'API'">
        <el-input type="textarea" :rows="2" placeholder="请输入请求参数" v-model="formData.requestParameters" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="doTest" :disabled="testDisable"> 测试 </el-button>
        <el-button size="small" type="primary" @click="submit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { addDataSource, updateDataSource,dataSourceTest } from '@/api/dataIntegration/dataSource/index';
const props = defineProps(['addVisible', 'data', 'type']);
const emit = defineEmits(['handleEvent']);
const types = ['MySQL', 'Oracle', 'Doris', 'FTP', 'MongoDB', 'API'];
const testDisable = ref(false);
const formData = ref({
  dataSourceType: '',
  dataSourceName: '',
  dataSourceDescriptive: '',
  Protoco: '',
  url: '',
  userName: '',
  secretCode: '',
  requestType: '',
  defaultRequestHeader: '',
  protoco: ''
});
if (props.type === 'edit') {
  //初始化数据
  formData.value = {
    id: props?.data?.id,
    dataSourceType: props?.data?.dataSourceType,
    dataSourceName: props?.data?.dataSourceName,
    dataSourceDescriptive: props?.data?.dataSourceDescriptive,
    protoco: props?.data?.protoco,
    url: props?.data?.url,
    userName: props?.data?.userName,
    secretCode: props?.data?.secretCode,
    requestType: props?.data?.requestType,
    defaultRequestHeader: props?.data?.defaultRequestHeader,
    requestParameters: props?.data?.requestParameters
  };
}
const handleEvent = (type, row) => {
  emit('handleEvent',{type, row});
};
// 测试
const doTest = () => {
  testDisable.value = true;
  dataSourceTest(formData.value).then(res=>{
    if(res?.data?.result){
      ElMessage({ showClose: true, message: '连接成功！', type: 'success' });
    }else{
      ElMessage({ showClose: true, message: '连接失败！', type: 'error' });
    }
  }).finally(()=>{
    testDisable.value = false;
  })
};
// 提交
const submit = () => {
  //数据校验
  if (!formData.value.dataSourceType) {
    ElMessage({ showClose: true, message: '请选择数据源类型！', type: 'error' });
    return;
  }
  if (!formData.value.dataSourceName) {
    ElMessage({ showClose: true, message: '请填写数据源名称！', type: 'error' });
    return;
  }
  if (['MySQL', 'Oracle', 'Doris'].includes(formData.value.dataSourceType)) {
    if (!formData.value.url) {
      ElMessage({ showClose: true, message: '请填写URL！', type: 'error' });
      return;
    }
    if (!formData.value.userName) {
      ElMessage({ showClose: true, message: '请填写用户名！', type: 'error' });
      return;
    }
    if (!formData.value.secretCode) {
      ElMessage({ showClose: true, message: '请填写密码！', type: 'error' });
      return;
    }
  }
  if (['API'].includes(formData.value.dataSourceType)) {
    if (!formData.value.url) {
      ElMessage({ showClose: true, message: '请填写URL！', type: 'error' });
      return;
    }
    if (!formData.value.requestType) {
      ElMessage({ showClose: true, message: '请选择请求类型！', type: 'error' });
      return;
    }
  }
  if (props.type === 'add') {
    addDataSource(formData.value).then((res) => {
      if (res) {
        ElMessage({ showClose: true, message: '新增成功！', type: 'success' });
        handleEvent('refresh', formData.value);
      }
    });
  } else {
    updateDataSource(formData.value).then((res) => {
      if (res) {
        ElMessage({ showClose: true, message: '修改成功！', type: 'success' });
        handleEvent('refresh')
      }
    });
  }
};
</script>
<style lang="scss" scoped>
</style>